<template>
  <div class='choice-container' style="margin:10px;">
    <!-- 精选题库 -->
  <el-card class="box-card">
    <!-- <span>卡片名称</span>
    <el-button style="float: right; padding: 3px 0" type="success">操作按钮</el-button> -->
<el-row type="flex" >
  <el-col :span="22"></el-col>
  <el-col :span="2">
    <el-col :span="20"></el-col>
    <el-col :span="4">
      <el-button type="success" size="small" icon="el-icon-edit" @click="$router.push('new')">新增试题</el-button>
      </el-col>
    </el-col>
</el-row>

<!-- 下拉框和输入框区域 -->

<el-form ref="form"  label-width="80px" inline style="margin-top:15px;">
<el-form-item label="学科">
    <el-select style="width:100%" placeholder="请选择活动区域" v-model="requestParams.subjectID" @click.native="disciplineList" @change="reselection">
      <el-option
      v-for="item in subjectOptions"
      :key="item.value"
       :label="item.label"
       :value="item.value"
       ></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="二级目录">
    <el-select style="width:220px" placeholder="请选择活动区域" v-model="requestParams.catalogID" @click.native="catalogue">
      <el-option
       v-for="item in Towcatalog"
       :key="item.value"
       :label="item.label"
       :value="item.value">
       </el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="标签">
    <el-select style="width:220px" placeholder="请选择活动区域" v-model="requestParams.tags" @click.native="tally">
      <el-option
       v-for="item in tag"
       :key="item.value"
       :label="item.label"
        :value="item.value"
        ></el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="关键字">
    <el-input
    style="width:220px"
     v-model="requestParams.keyword">
     </el-input>
  </el-form-item>
   <el-form-item label="试题类型">
    <el-select style="width:220px" placeholder="请选择活动区域" v-model="requestParams.questionType">
      <el-option
      v-for="item in questionType"
      :key="item.label"
      :label="item.label"
       :value="item.value"></el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="难度">
    <el-select style="width:220px" placeholder="请选择活动区域" v-model="requestParams.difficulty">
      <el-option
      v-for="item in difficulty"
      :key="item.label"
       :label="item.label"
       :value="item.value"></el-option>

    </el-select>
  </el-form-item>
   <el-form-item label="方向">
    <el-select style="width:220px" placeholder="请选择活动区域" v-model="requestParams.direction">
      <el-option
      v-for="(item,index) in direction "
      :key="index"
      :label="item"
      :value="item"></el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="录入人">
    <el-select style="width:220px" placeholder="请选择活动区域" v-model="requestParams.creatorID">
      <el-option
      v-for="item in userOptions "
      :key="item.id"
      :label="item.username"
      :value="item.username">
      </el-option>
    </el-select>
  </el-form-item>
    <el-form-item label="题目备注">
    <el-input style="width:220px" v-model="requestParams.remarks"></el-input>
  </el-form-item>
    <el-form-item label="企业简称">
    <el-input style="width:220px"  v-model="requestParams.shortName"></el-input>
  </el-form-item>
    <el-form-item label="城市" style="margin-right:20px;" >
      <!-- 城市 -->
    <el-select
    placeholder="活动区域"
    v-model="requestParams.province"
    style="width:120px"
    @change="handleCity"
       >
      <el-option
      v-for="item in cityOptions"
      :key="item"
      :label="item"
      :value="item">
      </el-option>
    </el-select>
    <!-- 地区 -->
      <el-select placeholder="活动区域" v-model="requestParams.city" style="width:120px">
      <el-option
      v-for="item in areaOptions"
      :key="item"
       :label="item"
      :value="item"></el-option>
    </el-select>
  </el-form-item>
  <el-button size="small" @click="eliminate" >清除</el-button>
   <el-button type="primary" size="small" @click="locating">搜索</el-button>
</el-form>
<!-- tabs标签页 -->
<!--   @tab-click="QuestionList"   -->
 <el-tabs  @tab-click="locating" type="card" v-model="activeName">
    <el-tab-pane label="全部" name="first"></el-tab-pane>
    <el-tab-pane label="待审核" name="second"></el-tab-pane>
    <el-tab-pane label="已审核" name="third"></el-tab-pane>
    <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
  </el-tabs>
  <!-- 提示的数据记录 -->
 <el-alert
 :closable="false"
    :title="`数据一共${total}条`"
    type="info"
    show-icon>
  </el-alert>
  <!-- 表格 -->
   <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="number"
        label="试题编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="subject"
        label="学科"
        width="180">
      </el-table-column>
      <el-table-column
        prop="catalog"
        label="目录">
      </el-table-column>
            <el-table-column
        prop="questionType"
        label="题型"
        width="180">
        <template #default="scope">
            <!-- {{scope.row.questionType}} -->
          {{questionType.find(item=>item.value===+scope.row.questionType).label}}
        </template>
      </el-table-column>
      <el-table-column
        prop="question"
        label="题干"
        width="180">
          <template slot-scope="scope">
            <div v-html="scope.row.question"></div>
          </template>
      </el-table-column>
  <el-table-column
        prop="addDate"
        label="录入时间"
        width="180">
      </el-table-column>
  <el-table-column
        prop="difficulty"
        label="难度"
        width="180">
        <template #default="scope">
          {{difficulty.find(item=>item.value===+scope.row.difficulty).label}}
        </template>
      </el-table-column>
            <el-table-column
        prop="creator"
        label="录入人"
        width="180">
      </el-table-column>
            <el-table-column
        prop="chkState"
        label="审核状态"
        width="180"
        :formatter="formatSex"
        >

      </el-table-column>
            <el-table-column
        prop="chkRemarks"
        label="审核意见"
        width="180">
      </el-table-column>
            <el-table-column
        prop="chkUser"
        label="审核人"
        width="180">
      </el-table-column>
            <el-table-column
        prop="publishState"
        label="发布状态"
        width="180"
         :formatter="release">
      </el-table-column>
      <!-- 旁边定位代码 -->
       <el-table-column label="操作" width="200px" fixed="right" align="center" style="font-size: 10px;">
          <template slot-scope="scope">
            <!-- <template #scope> -->
            <el-button class="dw" type="text" @click="openPreviewDialog(scope.row)">预览</el-button>
            <el-button class="dw" type="text" @click="openCheckDialog(scope.row)" :disabled="scope.row.chkState!==0">审核</el-button>
            <el-button class="dw" type="text" :disabled="scope.row.publishState===1" @click="$router.push(`new?id=${scope.row.id}`)">修改</el-button>
            <el-button class="dw" type="text" @click="togglePublish(scope.row)">{{scope.row.publishState===1?'下架':'上架'}}</el-button>
            <el-button class="dw" type="text" :disabled="scope.row.publishState===1" @click="delQuestion(scope.row)">删除</el-button>
            <!-- <el-button class="fs" type="text" @click="delChoice(scope.row)">移出精选</el-button> -->
          </template>
        </el-table-column>
    </el-table>
   <!-- 分页器 -->
          <el-pagination
        style="margin-top:20px;text-align:right"
        background
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        :page-size="requestParams.pagesize"
        :current-page="requestParams.page"
        @current-change="pager"
        :page-sizes="[5,10,15,20,25,30]"
        @size-change="handleSizeChange"
      ></el-pagination>
<!-- 预览页面 -->
<articles-preview :visiblePreview.sync="visiblePreview" :articleDetail="articleDetail"></articles-preview>
<!-- 审核页面 -->
<QuestionsCheck  ref="questionCheck" :data="questionInfo" @updateList="getList()"></QuestionsCheck>
</el-card>
    </div>
</template>

<script>
import { choice, remove as questionDel, choicePublish } from '@/api/hmmm/questions.js'
import { questionType, difficulty, direction } from '@/api/hmmm/constants.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as simple2 } from '@/api/hmmm/directorys.js'
import { simple as simple3 } from '@/api/hmmm/tags.js'
import { simple as userList } from '@/api/base/users'
// import { datas } from '@/api/hmmm/citys.js'
import { provinces as getCity, citys as getArea } from '@/api/hmmm/citys'
import { detail } from '@/api/hmmm/articles.js'
import articlesPreview from '../components/articles-preview.vue'
import QuestionsCheck from '../components/questions-check.vue'
export default {
  components: {
    articlesPreview,
    QuestionsCheck
  },
  name: 'QuestionsChoice',
  data () {
    return {
      visiblePreview: false,
      articleDetail: {},
      questionInfo: {},
      questionType, // 题型
      difficulty, // 难度
      direction, // 方向
      total: 0, // 分页
      // gain: {
      //   page: 1, // 当前页数
      //   pagesize: 10// 每页条数
      // },
      list: [], // 题库列表
      waiting: '', // 待审核
      audited: '', // 已审核
      activeName: 'first', // 默认选中的
      requestParams: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5,
        chkState: 'all'
      },

      subjectOptions: [], // 学科选项
      Towcatalog: [], // 二级目录列表
      tag: [], // 标签
      userOptions: [], // 录入人
      // 城市
      cityOptions: getCity(),
      // 地区 当选择了城市的时候赋值
      areaOptions: []
    }
  },
  created () {
    this.locating()
    // this.disciplineList()
    this.catalogue()
    // this.tally()
    this.userSubstance()
  },
  methods: {
    // async QuestionList () {
    //   const { data } = await choice(this.requestParams)
    //   // console.log(data)
    //   if (this.activeName === 'first') { // 全部
    //     this.list = data.items
    //     this.total = this.list.length
    //   } else if (this.activeName === 'second') { // 待审核
    //     this.list = data.items.filter(item => item.chkState === 1)
    //     this.total = this.list.length
    //     // console.log(data.items.map(item => item.chkState === 1))
    //   } else if (this.activeName === 'third') { // 已审核
    //     this.list = data.items.filter(item => item.chkState === 2)
    //     this.total = this.list.length
    //   } else { // 已拒绝
    //     this.list = data.items.filter(item => item.chkState === 0)
    //     this.total = this.list.length
    //   }
    // },
    formatSex (row, column) { // 审核状态
      return row.chkState === 1 ? '已审核' : row.chkState === 2 ? '已拒绝' : '待审核'
    },
    release (row, column) { // 发布状态  1上架 0下架
      return row.publishState === 1 ? '已发布' : '已下架'
    },
    handleSizeChange (size) {
      this.requestParams.page = 1
      this.requestParams.pagesize = size
      this.locating()
    },
    pager (np) {
      this.requestParams.page = np
      this.locating()
    },
    async disciplineList () { // 学科简单列表
      const { data } = await simple()
      console.log(data)
      this.subjectOptions = data
    },
    async catalogue () { // 目录简单列表  lable
      if (!this.subjectOptions.length || this.requestParams.subjectID === null) return
      // const { data } = await simple2({ subjectID: this.subjectOptions.lable })
      const { data } = await simple2({ subjectID: this.requestParams.subjectID })
      // console.log(data)
      this.Towcatalog = data
    },
    async tally () { // 标签简单列表
      if (!this.subjectOptions.length || this.requestParams.subjectID === null) return
      // const { data } = await simple3({ subjectID: this.Towcatalog.lable })
      const { data } = await simple3({ subjectID: this.requestParams.subjectID })
      this.tag = data
    },
    reselection () { // 当学科发生改变时让二级目录跟标签的值还原初始状态
      this.requestParams.catalogID = null
      this.requestParams.tags = null
    },
    async userSubstance () { // 录入人信息
      const { data } = await userList()
      // console.log(data)
      this.userOptions = data
    },
    handleCity (cityName) {
      // 地区选中的数据清空
      this.requestParams.city = null
      // 获取城市下的地区赋值给areaOptions
      this.areaOptions = getArea(cityName)
    },
    eliminate () { // 清除功能
      this.requestParams = {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 1,
        chkState: 'all'
      }
      // this.activeName = 'first'// 默认选中的
      // this.locating()// 重新渲染数据
    },
    async locating () { // 搜索和下面渲染数据的方法
      // console.log(data)
      if (this.activeName === 'first') { // 全部
        // console.log(222)
        this.requestParams.chkState = null
      } else if (this.activeName === 'second') { // 待审核
        this.requestParams.chkState = 1
      } else if (this.activeName === 'third') { // 已审核
        this.requestParams.chkState = 2
      } else { // 已拒绝
        this.requestParams.chkState = 0
      }
      // console.log(11)
      const res = await choice(this.requestParams)
      console.log(res)
      this.list = res.data.items
      this.total = res.data.counts
    },
    // 预览
    async openPreviewDialog (questionInfo) {
      console.log(questionInfo, 'id')
      this.questionInfo = questionInfo
      // this.$nextTick(() => {
      //   this.$refs.questionPreview.open()
      // })
      const { data } = await detail({ id: +this.questionInfo.id })
      console.log(data)
      this.articleDetail = data
      this.visiblePreview = true
    },
    // 审核
    openCheckDialog (questionInfo) {
      this.questionInfo = questionInfo
      this.$nextTick(() => {
        this.$refs.questionCheck.open()
      })
    },
    async getList () { // 发送请求
      const { data } = await choice(this.gain)
      // console.log(data.items)
      this.list = data.items
    },
    // 删除
    delQuestion (row) {
      console.log(row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
        await questionDel(row)// 发送删除请求
        this.locating()
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    // 上下架
    async togglePublish (question) {
      // choicePublish() //请求
      await this.$confirm(`您确认${question.publishState === 1 ? '下架' : '上架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      question.publishState = question.publishState === 1 ? 0 : 1
      await choicePublish(question)
      this.$message.success(`${question.publishState === 1 ? '上架' : '下架'}成功`)
      this.locating()// 重新渲染
    }

  }
}
</script>

<style scoped lang='scss'>
.dw{
  font-size: 12px;
}
</style>
